<template>
  <div class="person">
    <h2>{{ name }}</h2>
    <h2>{{ age }}</h2>
  </div>
</template>

<!-- 这种写法代替了setup函数，且无须手动返回页面便能读取到 -->
<script lang="ts" setup name="Person1">
    import {ref} from 'vue'

    let name=ref("沐七")
    let age=ref(18)
    let tel="13899999999"
    /*
    {
        "__v_isShallow": false,
        "dep": {},
        "__v_isRef": true,
        "_rawValue": "沐七",
        "_value": "沐七"
    }
    */
    console.log(1,name);
    console.log(2,age);
    console.log(3,tel);
    
    function changeAge(){
        age.value++
    }

    function changeName(){
        name.value="沐玖"
    }
    function showTel(){
        alert(tel)
    }
</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>